<template>
  <div class="roleBox">
    <!-- 头部面包屑 -->
    <div class="bread">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main">
      <el-button type="primary" @click="centerDialogVisible = true">添加用户</el-button>
      <div class="table">
        <el-table
        :data="tableData"
        border
        style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="商品名称">
                  <span>{{ props.row.name }}</span>
                </el-form-item>
                <el-form-item label="所属店铺">
                  <span>{{ props.row.shop }}</span>
                </el-form-item>
                <el-form-item label="商品 ID">
                  <span>{{ props.row.id }}</span>
                </el-form-item>
                <el-form-item label="店铺 ID">
                  <span>{{ props.row.shopId }}</span>
                </el-form-item>
                <el-form-item label="商品分类">
                  <span>{{ props.row.category }}</span>
                </el-form-item>
                <el-form-item label="店铺地址">
                  <span>{{ props.row.address }}</span>
                </el-form-item>
                <el-form-item label="商品描述">
                  <span>{{ props.row.desc }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            prop="roleName"
            label="角色名">
          </el-table-column>
          <el-table-column
            prop="roleDesc"
            label="角色描述">
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
            width="250">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
              <el-button type="danger" size="small" @click="omit(scope.row)">删除</el-button>
              <el-button type="warning" size="small" @click="share(scope.row)">分配角色</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

    </div>
    <!-- 添加用户弹出框 -->
    <el-dialog title="添加用户" :visible.sync="centerDialogVisible" width="30%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="角色名" prop="roleName">
          <el-input v-model="ruleForm.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="ruleForm.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="file('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑用户弹出框 -->
    <el-dialog title="修改用户信息" :visible.sync="centerDialogVisible1" width="30%">
      <el-form
        :model="ruleForm1"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="角色名" prop="" >
          <el-input v-model="ruleForm1.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="">
          <el-input v-model="ruleForm1.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="okedit">确 定</el-button>
      </span>
    </el-dialog>
        <!-- 分配用户弹出框 -->
        <el-dialog title="修改用户信息" :visible.sync="centerDialogVisible2" width="30%">
          <el-tree
            :data="tree"
            show-checkbox
            node-key="id"
            :default-expanded-keys="[2, 3]"
            :default-checked-keys="[5]"
            :props="defaultProps">
          </el-tree>
          <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible2 = false">取 消</el-button>
            <el-button type="primary" @click="centerDialogVisible2 = false">确 定</el-button>
          </span>
        </el-dialog>
  </div>
</template>

<script>
import { roleList,addrole,editrole,omitrole } from "@/api/user";
export default {
  name:'RoleList',
  data() {
      return {
        // 分配树数据
        tree:[{
          id: 1,
          label: '商品管理',
          children: [{
            id: 6,
            label: '商品列表',
            children: [{
              id: 17,
              label: '添加商品'
            }, {
              id: 18,
              label: '商品修改'
            },
            {
              id: 19,
              label: '商品删除'
            },
            {
              id: 20,
              label: '更新商品图片'
            },
            {
              id: 21,
              label: '更新商品状态'
            },
            {
              id: 22,
              label: '更新商品图片'
            },
            {
              id: 23,
              label: '获取商品详情'
            }]
          }],
          children: [{
            id: 7,
            label: '分类参数',
            children: [{
              id: 24,
              label: '获取参数列表'
            }, {
              id: 25,
              label: '创建商品参数'
            },
            {
              id: 26,
              label: '删除商品参数'
            }]
          }],
          children: [{
            id: 8,
            label: '商品分类',
            children: [{
              id: 27,
              label: '添加分类'
            }, {
              id: 28,
              label: '删除分类'
            },
            {
              id: 29,
              label: '获取分类详情'
            }]
          }]
        }, {
          id: 2,
          label: '订单管理',
          children: [{
            id: 9,
            label: '订单列表'
          }, {
            id: 10,
            label: '添加订单'
          }, {
            id: 11,
            label: '订单更新'
          }, {
            id: 12,
            label: '获取订单详情'
          }]
        }, {
          id: 3,
          label: '权限管理',
          children: [{
            id: 13,
            label: '角色列表',
            children: [{
              id: 30,
              label: '添加角色'
            },{
              id: 31,
              label: '删除角色'
            },{
              id: 32,
              label: '角色授权'
            },{
              id: 33,
              label: '取消角色授权'
            },{
              id: 34,
              label: '获取角色列表'
            },{
              id: 35,
              label: '获取角色详情'
            },{
              id: 36,
              label: '更新角色信息'
            },{
              id: 37,
              label: '更新角色权限'
            }
          ]
          }, {
            id: 14,
            label: '权限列表',
            children:[{
              id:38,
              label:'查看权限'
            }]
          }]
        },
        {
          id: 4,
          label: '用户管理',
          children: [{
            id: 15,
            label: '用户列表',
            children: [{
              id: 39,
              label: '添加用户'
            },
            {
              id: 40,
              label: '删除用户'
            },
            {
              id: 41,
              label: '更新用户'
            },{
              id: 42,
              label: '获取用户详情'
            },{
              id: 43,
              label: '分配用户角色'
            },{
              id: 44,
              label: '设置管理状态'
            }]
          }]
        },
        {
          id: 5,
          label: '数据统计',
          children: [{
            id: 16,
            label: '数据报表',
            children: [{
              id: 45,
              label: '查看数据',
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        tableData: [],
        // 添加用户数据
        ruleForm: {
          roleName: "",
          roleDesc:"",
          
        },
        ruleForm1: {
          roleName: "",
          roleDesc:"",
          
        },
        centerDialogVisible:false, // 添加角色对话框
        centerDialogVisible1:false,// 编辑角色对话框
        centerDialogVisible2: false,// 分配角色对话框
        rules: {
          roleName: [
            { required: true, message: "请输入角色名", trigger: "blur" },
          ],
          roleDesc: [
            { required: true, message: "请输入角色描述", trigger: "blur" },
          ],
        },
      }
    },
    mounted() {
      // 获取数据渲染页面
      roleList().then((res) => {
        this.tableData = res.data.data
      });
      
    },
    methods:{
      // 添加角色
      file(formName){
        console.log(formName)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            addrole(this.ruleForm).then((res) => {
              if(res.status == 200){
                this.$message({
                  message: '添加成功',
                  type: 'success'
                });
                // 从新渲染
                roleList().then((res) => {
                  this.tableData = res.data.data
                });
                this.centerDialogVisible = false
              }
            })
          } else {
            return false;
          }
        });
      },
      // 编辑用户按钮
      edit(val){
          this.ruleForm1 = val;
          this.centerDialogVisible1 = true
      },
      // 编辑完成
      okedit(){
          let obj = {
            id : this.ruleForm1.id,
            roleName : this.ruleForm1.roleName,
            roleDesc : this.ruleForm1.roleDesc,
          }
          console.log(obj.id)
          editrole(obj).then((res) => {
            if(res.status == 200){
                this.$message({
                  message: '编辑完成',
                  type: 'success'
                });
                console.log(res)
                // 从新渲染
                roleList().then((res) => {
                  this.tableData = res.data.data
                });
                this.centerDialogVisible1 = false
              }
          })
          this.centerDialogVisible1 = false
      },
      // 删除用户
      omit(val){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          omitrole(val.id).then((res) => {
            if(res.status == 200){
              this.$message({
                message: '删除完成',
                type: 'success'
              });
              // 从新渲染
              roleList().then((res) => {
                this.tableData = res.data.data
              });
              this.centerDialogVisible1 = false
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        
      },
      // 分配用户
      share(val){
        this.centerDialogVisible2 = true;
        this.ruleForm2.role_name = val.role_name;
        this.ruleForm2.username = val.username;
      },
    }
}
</script>

<style lang="scss">
.main {
  width: 98%;
  height: auto;
  margin-top: 15px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.table{
  margin-top: 15px;
}
</style>